// 根组件
import { defineComponent, h, computed, ref } from "@vue/runtime-core";
import { PAGE, getPageComponent } from "./page/index";

export default defineComponent({
  setup() {
    // 改变 string 来实现组件切换
    // 在 vue3 中使用 ref 来创建响应式对象 接收值类型的
    let currentPageName = ref(PAGE.start);
    /**
     * {
     *   value: 'StartPage',
     *   _v_isRef: true
     * }
     */

    // 使用计算属性来修改对应的组件
    // computed 创建出来的也是 ref 响应式对象
    const currentPage = computed(() => {
      return getPageComponent(currentPageName.value);
    });

    const handleNextPage = (page) => {
      currentPageName.value = page;
    };

    return {
      currentPage,
      handleNextPage,
    };
  },
  render(ctx) {
    /**
     * 这是测试 demo 画了一个矩形和一个圆
     * 创建 vnode，为了支持 tree shaking 所有的模块都需要导入进来
     * const vnode = h("rect", { x: 100, y: 100 }, [
     * '这是 vue3',
     * h("circle", { x: 150, y: 150 })
     * h(Circle)
     * ]);
     * return vnode
     */

    // 响应式数据 -> vnode -> dom element
    return h("Container", [
      h(ctx.currentPage, {
        onChangePage: ctx.handleNextPage,
      }),
    ]);
  },
});
